<template>
  <div id="title-index">
    <div class="title-index-div">
      <el-tag>hello world</el-tag>
      <el-tag>hello world</el-tag>
      <p>123</p>
      <span class="a">as</span>
      <el-button @click="change">line切换</el-button>
      <el-button type="success">成功</el-button>
      <el-button @click="openBox">弹框</el-button>
      <el-button type="warning" @click="errBox">错误</el-button>
    </div>
    <div class="box">
      <div style="width:400px">
        <huan/>
      </div>
      <div class="aa" style="width:400px;">123
      <lei/>
      </div>
      <div id="line" :style="style"></div>
      <div id="data1" :style="style"></div>
      <div id="data2" :style="style"></div>
      <div id="data3" :style="style"></div>
      <div id="data4" :style="style"></div>
      <div id="data5" :style="style"></div>
      <div id="data6" :style="{width:600+'px',height:600 + 'px'}"></div>
      <div id="data7" :style="{width:600+'px',height:600 + 'px'}"></div>
      <div id="data8" :style="style"></div>
    </div>
    <div>
      <boxIndex ref="boxIndex"/>
    </div>
    
  </div>
</template>

<script>
import * as echarts from "echarts"
import boxIndex from "./box/index.vue"
import lei from './leida.vue'
import huan from './huan.vue'
import {
  data1,
  data2,
  data3,
  data4,
  data5,
  data6,
  data7,
  data8
} from "./dataView/index"
export default {
  components: {
    boxIndex,
    lei,
    huan
  },
  data() {
    return {
      style: {
        width: 300 + "px",
        height: 300 + "px"
      },
      show: true
    }
  },
  methods: {
    lineCreate() {
      var chartDom = document.getElementById("line")
      var myChart = echarts.init(chartDom)
      var option
      if (this.show === true) {
        option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: "line"
            },
            {
              data: [130, 210, 204, 200, 115, 127, 240],
              type: "line"
            },
            {
              name: "访问来源",
              type: "pie",
              radius: "50%",
              data: [
                { value: 1048, name: "搜索引擎" },
                { value: 735, name: "直接访问" },
                { value: 580, name: "邮件营销" },
                { value: 484, name: "联盟广告" },
                { value: 300, name: "视频广告" }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        }
        myChart.on("click",function (params) {
          console.log(params)
        })
      } else {
        var dataAxis = [
          "点",
          "击",
          "柱",
          "子",
          "或",
          "者",
          "两",
          "指",
          "在",
          "触",
          "屏",
          "上",
          "滑",
          "动",
          "能",
          "够",
          "自",
          "动",
          "缩",
          "放"
        ]
        var data = [
          220,
          182,
          191,
          234,
          290,
          330,
          310,
          123,
          442,
          321,
          90,
          149,
          210,
          122,
          133,
          334,
          198,
          123,
          125,
          220
        ]
        var yMax = 500
        var dataShadow = []

        for (var i = 0; i < data.length; i++) {
          dataShadow.push(yMax)
        }

        option = {
          title: {
            text: "特性示例：渐变色 阴影 点击缩放",
            subtext: "Feature Sample: Gradient Color, Shadow, Click Zoom"
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              inside: true,
              textStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 10
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#999"
              }
            }
          },
          dataZoom: [
            {
              type: "inside"
            }
          ],
          series: [
            {
              type: "bar",
              showBackground: true,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#2378f7" },
                    { offset: 0.7, color: "#2378f7" },
                    { offset: 1, color: "#83bff6" }
                  ])
                }
              },
              data: data
            }
          ]
        }

        // Enable data zoom when user click bar.
        var zoomSize = 6
        myChart.on("click", function (params) {
          console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
          myChart.dispatchAction({
            type: "dataZoom",
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue:
              dataAxis[
                Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
              ]
          })
        })
      }
      option.tooltip = {
        trigger: "item"
      }
      myChart.setOption(option, true)
    },
    change() {
      this.show = !this.show
      this.lineCreate()
    },
    errBox() {
      this.$message({
        type: "error",
        duartion: 5000,
        message: "错误"
      })
    },
    openBox() {
      this.$refs.boxIndex.dialogVisible = true
    }
  },
  mounted() {
    this.lineCreate()
    data1("data1")
    data2("data2")
    data3("data3")
    data4("data4")
    data5("data5")
    data6("data6")
    data7("data7")
    data8("data8")
  }
}
</script>

<style lang="scss">
$color: red;
$blue: blue;
@mixin cl {
}
#title-index {
  .title-index-div {
    @include cl;
    p {
      color: $color;
    }
    span.a {
      color: $blue;
    }
  }
  .box {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>

